<template>
  <div class="auth-container">
     <!-- 遮罩层 -->
    <transition name="go">
      <div class="mask" v-if="isShow"></div>
    </transition>
    <!-- 选择身份 -->
    <transition name="move">
      <div class="permission-wrapper"  v-if="isShow">
        <div class="permission-header">
          <p>选择身份</p>
          <i class="iconfont iconerror4" @click="closePopup"></i>
        </div>
        <div class="permission-content">
          <div class="left" :class="roleType === 1 ? 'active' :''" @click="changeHandler(1)">
            <h3>MCN机构</h3>
            <div class="triangle-tick" v-show = "roleType === 1"></div>
            <i class="iconfont iconduihao1 left-tick"></i>
          </div>
          <div class="right" :class="roleType === 2 ? 'active' :''"  @click="changeHandler(2)">
            <h3>分销团长</h3>
            <div class="triangle-tick" v-show = "roleType === 2"></div>
            <i class="iconfont iconduihao1 right-tick"></i>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  // async fetch({store}){
  //   await store.commit('setRoleType',1)
  // },
  props:{
    isShow:{
      type: Boolean,
      default:false
    }
  },
  data (){
    return{
      // 是否显示
      // show:false,
      // 切换权限的 角色信息 1MCN机构 2团长 3未知
      index:1,
    }
  },
  created() {
    if(this.index === 1){
      this.$store.commit('setRoleType',this.index)
    }else if(this.index === 2){
      this.$store.commit('setRoleType',this.index)
    }
  },
  computed: {
    roleType() {
      return this.$store.state.roleType;
    }
  },
  methods:{
    closePopup() {
      console.log("关闭")
      this.isShow = false;
    },
    // 左边 和右边切换的权限
    changeHandler(index) {
      console.log('左右切换的权限')
      this.$store.commit('setRoleType',index)
      this.index = index;
      console.log('index',this.index)
    },
  },
}
</script>

<style scoped>
  .mask{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color: #ffffff;
    background: rgba(0,0,0,0.5);
    z-index:100000;
  }
  .permission-wrapper{
    width:550px;
    position: fixed;
    top:150px;
    left:50%;
    transform: translateX(-50%);
    background-color: #ffffff;
    z-index:100000;
    border-radius: 4px;
  }
  .permission-header{
    display:flex;
    justify-content:space-between;
    height:50px;
    line-height: 50px;
    background-color: #0096e6;
    color:#ffffff;
    font-size:18px;
    padding:0 20px;
    border-radius: 4px 4px 0 0;
  }
  .permission-header i{
    font-size: 25px;
    cursor:pointer;
  }
  .permission-content {
    margin: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
  }
  .permission-content h3 {
    font-size: 28px;
  }
  .left,
  .right{
    width: 200px;
    height: 130px;
    padding:30px;
    position: relative;
    border:1px solid #e1e1e1;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
  }
  .permission-content .active{
    color:#0096e6;
    border:1px solid #0096e6;
  }
  .left .triangle-tick ,
  .right .triangle-tick{
    width:0;
    height:0;
    position: absolute;
    bottom:-20px;
    right:-21px;
    border: 20px solid;
    border-color: transparent transparent transparent #0096e6;
    transform: rotate(45deg);
  }
  .left-tick,
  .right-tick {
    color: #ffffff;
    position:absolute;
    bottom:0;
    right:0;
  }
  
  .move-enter{
    left: -50%;
  }
  .move-enter-to,
  .move-leave {
    left: 50%;
  }
  .move-leave-to {
    left: 150%;
  }
  .move-leave-active {
    transition: left .5s;
  }
  /* 进入的时候等待.5s */
  .move-enter-active {
    transition: left .5s;
    transition-delay: .5s;
  }
  /* 进入 */
  .go-enter,
  .go-leave-to{
    opacity: 0
  }
  .go-enter-to,
  .go-leave{
    opacity: 1
  }
  .go-enter-active {
    transition: opacity .5s;
  }
  /* 离开的时候的时候等待.5s */
  .go-leave-active {
    transition: opacity .5s;
    transition-delay: .5s
  }
</style>

